<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
 <!DOCTYPE html>
<html>

<head>
	<base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    <title>用户-绑定外部域名</title>
    <meta name="keywords" content="用户-绑定外部域名">
    <meta name="description" content="用户-绑定外部域名">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="static/templet/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="static/templet/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="static/templet/css/animate.min.css" rel="stylesheet">
    <link href="static/templet/css/base.css" rel="stylesheet">
    <link href="static/templet/css/style.min.css?v=4.0.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
    <form action="user" method="post" id="userForm">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                    	<h3 id="explain-1">1、请复制记录值，在第三方域名提供商中，添加TXT记录类型到主机记录${hostRecord }中：</h3>
                        <table class="m-b-xs table table-hover">
                            <thead>
                                <tr>
                                    <th>记录类型</th>
                                    <th>主机记录</th>
                                    <th>记录值</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr>
                                    <td>${recordType }</td>
									<td>${hostRecord }</td>
                                    <td style="width: 40%">
                                    <div class="input-group">
                                    <input type="text" id="recordValue" value="${recordValue }" class="form-control" readonly="readonly">
                                    <span class="input-group-btn">
                                    	<button type="button" id="copy" class="btn btn-success">复制</button>
                                    </span>
                                    </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div style="width: 50%;margin-top: 30px">
                        <h3 id="explain-2">2、请输入已添加TXT记录值的域名进行下一步绑定：</h3>
                        <table class="table table-hover">
                        <thead>
                        <tr>
                                    <th>域名</th>
                                    <th>操作</th>
                        </tr>
                        <thead>
                        <tbody>
        					<tr>
        						<td><input type="text" id="domain" class="form-control" placeholder="example.com">
        						</td>
        						<td>
        							<button type="button" class="btn btn-success" onclick="check();">检测</button>
        						</td>
        					</tr>
        				</tbody>
        				</table>
					</div>
					
					<div style="width: 50%;margin-top: 30px">
                        <h3 id="explain-3">3、请输入域名主记录值进行下一步绑定：</h3>
                        <table class="table table-hover">
                        <thead>
                        <tr>
                        			<th>主机记录</th>
                                    <th>操作</th>
                        </tr>
                        <thead>
                        <tbody>
        					<tr>
        						<td>
        						<input type="text" id="hostRecord" class="form-control" placeholder="www">
        						</td>
        						<td>
        							<button type="button" class="btn btn-success" onclick="goBinding();">去绑定</button>
        						</td>
        					</tr>
        				</tbody>
        				</table>
        				<p>
							主机记录就是域名前缀，常见用法有：<br>
							www：解析后的域名为www.example.com。<br>
							@：直接解析主域名 example.com。<br>
							*：泛解析，匹配其他所有域名 *.example.com。<br>
							mail：将域名解析为mail.example.com，通常用于解析邮箱服务器。<br>
							二级域名：如：abc.example.com，填写abc。<br>
							手机网站：如：m.example.com，填写m。<br>
							</p>
					</div>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </div>
    <script src="static/templet/js/jquery.min.js?v=2.1.4"></script>
    <script src="static/templet/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="static/templet/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="static/templet/js/plugins/layer/layer.min.js"></script>
    <script src="static/templet/js/iframe.min.js"></script>
    <script src="static/templet/js/clipboard.min.js"></script>
    <script type="text/javascript">
    var userId = '${userId}';
    $('#copy').attr('data-clipboard-text',$("#recordValue").val());
	new ClipboardJS('#copy');

	$('#copy').click(function(){
		layer.msg('复制成功', {icon: 1});
	})
    var speed = 0;
    function check(){
    	speed = 0;
		var load = layer.load(1, {
	        shade: [0.1,'#fff']
	    });

    	
    	var domain = $.trim($('#domain').val());

    	if(domain == ''){
    		layer.msg('域名不能为空', {icon: 1});
			layer.close(load);
			return;
		}

    	$.post('user/domain/verify',{userId:userId,domain:domain}, function(data, status){
    		layer.close(load);
			if(status == 'success'){
				var result = data.result;
				var state = result.state;
				console.log(result)
				if(state == 1){
					layer.msg('检测成功', {icon: 1});
					speed = 1;
				}else{
					layer.msg(result.message, {icon: 1});
				}
			}
		})
    	
    }

    function goBinding(){
		if(speed == 0){
			layer.msg('请先完成第二步检测', {icon: 1});
			return;
		}

    	var load = layer.load(1, {
	        shade: [0.1,'#fff']
	    });
    	var hostRecord = $.trim($('#hostRecord').val());

    	if(hostRecord == ''){
    		layer.msg('域名主记录不能为空', {icon: 1});
			layer.close(load);
			return;
		}
    	var domain = $.trim($('#domain').val());

    	if(domain == ''){
    		layer.msg('域名不能为空', {icon: 1});
			layer.close(load);
			return;
		}

		location.href = 'user/domain/binding?hostRecord='+hostRecord+'&domain='+domain+'&userId='+userId;
		
    }
  
    </script>

</body>

</html>